<template>
    <div>
        <!-- indicator-position="none"轮播底部指示器是否显示 outside/none -->
        <el-carousel type="card" height="200px" class="swiper">
            <el-carousel-item class="swiper-item" v-for="(item, index) in list" :key="index">
                <div class="swiper-item-img">
                    <!-- 图片变形问题参考element->图片 fit属性 -->
                    <el-image style="width: 100%; height: 100%" :src="item" :fit="fit"></el-image>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
  
<script>
export default {
    name: 'Swiper',
    props: {
        list: {
            type: Array,
            default: []
        },
        fit: {
            type: String,
            default: 'contain'
        }
    },
    data() {
        return {

        }
    }
}
</script>
  
<style scoped>
.swiper {
    border-radius: 15px;
    overflow: hidden;
}

.swiper-item-img {
    width: 100%;
    height: 100%;
}
</style>
  